<template>
    <ul class="cartList">
    <div class="cartList__hint" v-if="!cartListObj.cartTotal" v-show="isCartList">什么都没有</div>
      <template v-for="(item, index) in cartListObj.cartListArr" :key="index">
          <li class="cartList__item" v-if="item.total">
            <div class="cartList__item__shop">
                <h3 class="cartList__item__shop__tlite">{{item.shopName}}</h3>
                <template v-for="(items, key ,indexs) in item.productListObject" :key="items._id">
                  <div
                    class="cartList__item__shop__productBox"
                    v-if="item.isDown || indexs <= 1"
                  >
                    <div class="cartList__item__shop__productBox__left">
                        <img
                        :src="items.imgUrl"
                        alt="jpg"
                        class="cartList__item__shop__productBox__left__img"
                        >
                        <div class="cartList__item__shop__productBox__left__text">
                            <div class="cartList__item__shop__productBox__left__text__name">{{items.name}}</div>
                            <div class="cartList__item__shop__productBox__left__text__count"><span>&yen;</span>{{`${items.price}  x  ${items.count}`}}</div>
                        </div>
                    </div>
                    <div class="cartList__item__shop__productBox__price"><span>&yen;</span>{{(items.price * items.count).toFixed(2)}}</div>
                </div>
              </template>
              <div
                class="cartList__item__shop__down"
                v-if="item.isDown || Object.keys(item.productListObject).length >= 2"
                @click="handleDownClick(index)"
              >
                共计3件/1.4kg
                <span
                  class="cartList__item__shop__down__icon iconfont"
                  v-html="item.isDown ? '&#xe665;' : '&#xe602;'"
                >
                </span>
              </div>
            </div>
        </li>
      </template>
    </ul>
</template>

<script>
import { useCommonAllListCartEffect } from '../../../effects/cartEffects'
import { computed } from 'vue'
const cartListObjFn = () => {
  const { productListAllCount } = useCommonAllListCartEffect()
  const cartList = productListAllCount.value
  // 计算属性更新数据状态，然后渲染到页面
  const cartListObj = computed(() => {
    const cartListArr = []
    for (const i in cartList) {
      cartListArr.push(cartList[i])
    }
    // 购物车没有东西，不展示商品的逻辑 根据判断数据中count商品的数量来判断
    let cartTotal = 0 // 统计所有店铺的商品数量总数
    const isDown = false
    cartListArr.forEach(item => {
      let total = 0 // 统计单个店铺所有商品的数量总数
      for (const i in item.productListObject) {
        total += item.productListObject[i].count // 加count数量值
      }
      item.total = total
      item.isDown = isDown
      cartTotal += total // 把所有店铺的商品都加到一起。用来判断整个购物车页面是否有商品
    })
    return { cartListArr, cartTotal }
  })
  return { cartListObj }
}

// 下拉展示商品
const handleDownClickFn = (Obj) => {
  const handleDownClick = down => {
    Obj.cartListArr.forEach((item, index) => {
      if (index === down) {
        item.isDown = !item.isDown
      }
    })
  }
  return { handleDownClick }
}

export default {
  name: 'CartListItem',
  props: ['priceFn', 'isCartList'],
  setup () {
    const { cartListObj } = cartListObjFn()
    const { handleDownClick } = handleDownClickFn(cartListObj.value)
    return { cartListObj, handleDownClick }
  }
}
</script>

<style lang="scss">
@import '../../../style/colorValue.scss';
@import '../../../style/mixinApi.scss';
.cartList__hint {
    width: 100%;
    text-align: center;
    font-size: .3rem;
    font-weight: bold;
}

.cartList__item {
margin:.16rem .18rem .16rem .18rem;
background: $whiteColor;
border-radius: .04rem;
&__shop {
    padding:.16rem;
    &__down {
    text-align: center;
    line-height: .28rem;
    background: #F5F5F5;
    height: .28rem;
    font-size: .14rem;
    color: #999999;
    &__icon {
      font-size: .14rem;
      color: #999999;
    }
    }
    &__tlite {
    margin:0;
    font-size: .16rem;
    color: $TextColor;
    padding-bottom: .16rem;
    }
    &__productBox {
    display: flex;
    padding-bottom: .16rem;
    justify-content: space-between;
    &__left {
        display: flex;
        &__text {
        padding-left: .16rem;
        font-size: .14rem;
        &__name {
            width: 1.1rem;
            padding-bottom: .06rem;
            color: $TextColor;
            font-weight:bold;
            line-height: .2rem;
            @include hidText()
        }
        &__count {
            color: $redColor;
            line-height: .2rem;
            span {
            font-size: .2rem;
            display: inline-block;
            transform: scale(.5);
            position: relative;
            top: .04rem;
            }
        }
        }
    }
    &__price {
        display: flex;
        align-items: flex-end;
        font-size: .14rem;
        color: $blackColor;
        line-height: .2rem;
        span {
        font-size: .2rem;
        transform: scale(.5);
        line-height: .17rem;
        color: $blackColor;
        }
    }
    }
}
}
.cartList__item__shop__productBox__left__img {
width: .46rem;
height: .46rem;
}
</style>
